<template>
  <div>
    <div class="box" id="content" contenteditable="true" @blur="blurcontent">

    </div>
    <div class="box2">
      <span>加粗</span>
      <span>行高</span>
      <span>图片</span>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    blurcontent(self) {
      console.log(self);

      const dom = document.getElementById('content');
      const defaultHtml = '<p class="feedback_mix_text citem">1<b style="color:red">22</b></p>';
      if (dom.innerHTML == '') {
        dom.innerHTML = defaultHtml;
      }
    },
  },
};
</script>
<style>
.box {
  height: 200px;
  width: 90%;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
}
.box2{
  display:flex;
  justify-content: space-evenly;
}
.box2>span{
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #333
}
</style>
